import React from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends React.Component {
  // 状态在哪里，操作状态的方法就在哪里

  // 初始化状态
  state = {
    todos: [
      {
        id: 1,
        name: "eat",
        done: true,
      },
      {
        id: 2,
        name: "sleep",
        done: true,
      },
      {
        id: 3,
        name: "coding",
        done: false,
      },
      {
        id: 4,
        name: "shopping",
        done: true,
      },
    ],
  };

  // 用于添加一个todo，接收参数是todo参数
  addTodo = (todoObj) => {
    // 获取原todos
    const { todos } = this.state;
    // 追加一一个todo
    const newTodos = [todoObj, ...todos];
    // 更新状态
    this.setState({ todos: newTodos });
  };

  // 用于更新一个todo对象
  updateTodo = (id, done) => {
    // 获取原todos
    const { todos } = this.state;
    // 匹配处理对象
    const newTodos = todos.map((todo) => {
      if (todo.id === id) return { ...todo, done };
      else return todo;
    });
    // 更新状态
    this.setState({ todos: newTodos });
  };

  // 用于删除一个todo
  deleteTodo = (id) => {
    // 获取原todos
    const { todos } = this.state;
    // 删除指定id的todo对象
    const newTodos = todos.filter((todo) => {
      return todo.id !== id;
    });
    // 更新状态
    this.setState({ todos: newTodos });
  };

  checkAll = (done) => {
    // 获取原todos
    const { todos } = this.state;
    const newTodos = todos.map((todo) => {
      return { ...todo, done };
    });
    // 更新状态
    this.setState({ todos: newTodos });
  };

  // 用于清除所有已完成的todo
  clearAllDone = () => {
    // 获取原todos
    const { todos } = this.state;
    // 删除指定id的todo对象
    const newTodos = todos.filter((todo) => {
      return !todo.done;
    });
    // 更新状态
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;

    return (
      <div className="App">
        <div className="todo-container">
          <div className="todo-wrap">
            <Header addTodo={this.addTodo} />
            <List
              todos={todos}
              updateTodo={this.updateTodo}
              deleteTodo={this.deleteTodo}
            />
            <Footer todos={todos} checkAll={this.checkAll} clearAllDone={this.clearAllDone}/>
          </div>
        </div>
      </div>
    );
  }
}
